iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
Modern Web

從0開始系列 第 19

從0開始爬 - JavaScript

  • 分享至 

  • xImage
  •  

是新主題喔喔喔喔喔

假如說,盜墓筆記有吳邪胖子張起靈的鐵三角,HTML、CSS、JavaScript就是網頁的鐵三角
HTML是網頁的內容,CSS是網頁的美編,JavaScript是網頁的後台運作。


JavaScript 程式

小簡介

JavaScript是一種用來呈現網頁動態效果的程式語言(舉例)。有許多人會將JavaScript與Java搞混,認為他們是類似的語言,但是他們就跟太陽和太陽餅一樣,是完全不一樣的東西,但是又有哪些地方感覺熟悉。
JavaScript設計出來目的就是要比Java還要更容易讓人理解,讓更多網頁設計師能夠上手,這就讓JavaScript設計是一種物件導向的程式語言,簡單來說,就是JavaScript內建一些功能範本,只要透過下指令方式,就能協助運作。

撰寫規則

  1. 英文字母 : 大小寫
    JavaScript跟CSS一樣,大小寫對於設定是不一樣的,與HTML相反。

  2. 敘述 : 良好習慣
    這個不是硬性,就是一個大家默認的公約。一行一個設定值,並且在每一行結尾加上分號。

  3. 空白
    JavaScript會忽略多餘的空白,跟CSS不一樣,他不會把空白算進去

  4. 縮排
    縮排層級按2個空白字元,HTML跟CSS按1個

  5. 註解
    JavaScript有單行和多行2個不同符號。//是單行,/**/是多行註解。

  6. 命名規則
    這個命名都是自定義,想要自定的話就需要遵守下面幾項

    • 第一字元可以是英文字元、底線、錢字符號。其他字元可以是以上3個還有數字。所有字元都需要注意英文大小寫
    • 不能使用JavaScript的設定過字元
    • 常數名稱,全部大寫單字之間用底線隔開
    • 類別名稱,建議每個單字字首大寫
    • 事件處理函式名稱以on開頭
    • 變數和函數名稱,建議以小寫開頭,之後單字再大寫開頭

寫入HTML

這些方法都會呼叫內建函式: alert(),顯示對話方塊

  1. 嵌入JavaScript : <script>
    放在<head>裡面,而且放在<meta><title>等元素後面,但是也可放在<body>裡面,因為HTML的載入順序是由上至下,先載入的會先執行。
    <!-- -->這個註解是為了應對不支援JavaScript的瀏覽器,一遇到這種瀏覽器JavaScript會被直接當成註解,但是通常會有內建直譯器。
    https://ithelp.ithome.com.tw/upload/images/20221003/20151919507fdiKOF1.png
    https://ithelp.ithome.com.tw/upload/images/20221003/20151919HNZI4DPXa6.png

  2. 設定處理程式 : <onload>
    這個是放在<body>裡面。發生load事件的時候呼叫alert()。
    https://ithelp.ithome.com.tw/upload/images/20221003/20151919Is4KbqNgrH.png

  3. 連接外部 :<src>
    使用src連接外部文件。
    https://ithelp.ithome.com.tw/upload/images/20221003/20151919GS3NnDdxLK.png


是學js的第1天


上一篇
從0開始爬CSS - 轉場、鼠標形狀、媒體查詢
下一篇
從0開始爬 - JavaScript小白筆記
系列文
從0開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言